<ion-view  class="circle-bg-dark">
  <ion-nav-title>
    <span class="title visible-xs visible-sm" translate>API.HOME.TITLE</span>
  </ion-nav-title>

  <ion-nav-buttons side="right">
    <!-- locales -->
    <button class="button button-clear hidden-xs hidden-sm gray icon-left"
            style="max-width: 450px !important"
            ng-click="showLocalesPopover($event)">
      <i class="icon ion-earth" ></i>
      {{$root.settings.locale.label}}
      <small class="ion-arrow-down-b"></small>
    </button>
  </ion-nav-buttons>

  <ion-content class=" has-header no-padding-xs positive-900-bg ">

    <br class="hidden-xs"/>

    <div class="light text-center" >
      <h4 class="hidden-xs" translate>API.HOME.MESSAGE</h4>
      <h4 class="visible-xs padding" translate>API.HOME.MESSAGE_SHORT</h4>
    </div>

    <br class="hidden-xs"/>

    <div class="row no-padding-xs">
      <div class="col col-20 hidden-xs hidden-sm">&nbsp;</div>
      <div class="col ">

        <div class="light-bg no-padding">
          <!-- include documentation -->
          <ng-include src="'templates/api/doc.html'"></ng-include>
        </div>
      </div>

      <div class="col col-20 hidden-xs hidden-sm text-center" id="home" >
        <div style="display: block; width: 100%;">
          <div class="logo"></div>
          <small class="gray padding-top">v{{$root.config.version}}</small>
        </div>
      </div>
    </div>

    <p class="visible-xs visible-sm light padding-top text-center">
      {{'COMMON.APP_NAME'|translate}} API
      - <a href="#" ng-click="showAboutModal($event)">v{{$root.config.version}}</a>
    </p>

    <p class="hidden-xs hidden-sm gray padding-top text-center">
      {{'COMMON.APP_NAME'|translate}} API v{{$root.config.version}}
      - <a href="#" ng-click="showAboutModal($event)" title="{{'HOME.BTN_ABOUT'|translate}}">{{'HOME.BTN_ABOUT'|translate}}</a>
      - <a href="../" title="{{'API.COMMON.LINK_STANDARD_APP_HELP'|translate}}">{{'API.COMMON.LINK_STANDARD_APP'|translate}}</a>
    </p>

  </ion-content>

</ion-view>

